<template>
  <PageWrapper contentBackground :contentFullHeight="true">
    <template #headerContent>
      <RadioGroup v-model:value="searchMode">
        <RadioButton value="archive">归档</RadioButton>
        <RadioButton value="terminate">终止</RadioButton>
      </RadioGroup>
    </template>
    <template #default>
      <div v-if="searchMode == 'archive'">
        <Tabs tab-position="left">
          <TabPane v-for="i in yearList" :key="i" :tab="i">
            <List>
              <ListItem>
                <template #actions>
                  <Space>
                    <Tooltip title="项目详情">
                      <Icon icon="majesticons:checkbox-list-detail-line" size="20" />
                    </Tooltip>
                    <Divider type="vertical" />
                    <Tooltip title="设为模板">
                      <Icon icon="ph:download" size="20" />
                    </Tooltip>
                    <Divider type="vertical" />
                    <Tooltip title="分享项目">
                      <Icon icon="material-symbols:share-outline" size="20" />
                    </Tooltip>
                    <Divider type="vertical" />
                    <Tooltip title="导出项目">
                      <Icon icon="ph:upload" size="20" />
                    </Tooltip>
                  </Space>
                </template>
                <ListItemMeta>
                  <template #title>项目名称</template>
                  <template #description>开始时间：2023-12-13 结束时间：2023-12-14</template>
                </ListItemMeta>
                <div>创建人: 系统管理员<Divider type="vertical" />创建时间: 2023-12-13</div>
              </ListItem>
            </List>
          </TabPane>
        </Tabs>
      </div>
      <div style="padding: 20px" v-if="searchMode == 'terminate'">
        <List>
          <ListItem>
            <template #actions>
              <Space>
                <Tooltip title="项目详情">
                  <Icon icon="majesticons:checkbox-list-detail-line" size="20" />
                </Tooltip>
                <Divider type="vertical" />
                <Tooltip title="设为模板">
                  <Icon icon="ph:download" size="20" />
                </Tooltip>
                <Divider type="vertical" />
                <Tooltip title="恢复项目">
                  <Icon icon="tabler:refresh" size="20" />
                </Tooltip>
                <Divider type="vertical" />
                <Tooltip title="导出项目">
                  <Icon icon="ph:upload" size="20" />
                </Tooltip>
              </Space>
            </template>
            <ListItemMeta>
              <template #title>项目名称</template>
              <template #description>开始时间：2023-12-13 结束时间：2023-12-14</template>
            </ListItemMeta>
            <div>创建人: 系统管理员<Divider type="vertical" />创建时间: 2023-12-13</div>
          </ListItem>
        </List>
      </div>
    </template>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Icon } from '/@/components/Icon';
  import {
    Radio,
    Tabs,
    TabPane,
    List,
    ListItemMeta,
    ListItem,
    Space,
    Divider,
    Tooltip,
  } from 'ant-design-vue';

  const RadioButton = Radio.Button;
  const RadioGroup = Radio.Group;

  const searchMode = ref('archive');
  const yearList = reactive([2020, 2022, 2023, 2024]);
</script>
